<script setup lang="ts">
import Menu from '@/components/menu/index.vue'
import Header from '@/components/header/index.vue'
import {ref, onMounted, onUnmounted} from "vue";
import {getImage, getMd} from "@/assets/getFlies.ts";
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const markdownContent = ref('');
const markId= 'preview-only'

const loadMarkdown = async (url: string): Promise<string> => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return await response.text();
  } catch (error) {
    console.error('Error loading Markdown file:', error);
    return '';
  }
};


const showMenu = ref(true);
const changeShowMen = (val: boolean) => {
    showMenu.value = val;
}

// 监听浏览器尺寸
const handleResize = () => {
    showMenu.value = window.innerWidth > 768;
};
onMounted( async () => {
    window.addEventListener('resize', handleResize);
    markdownContent.value = await loadMarkdown(getMd('wallet'))
});

onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
});
</script>

<template>
  <div class="f relative h_fill w-full">
      <!--  left  -->
      <transition name="menu">
          <Menu v-if="showMenu" class="border_r flex-none"></Menu>
      </transition>
      <div class="col_box f1 h-full justify-between">
          <!--  header  -->
          <Header :show-menu="showMenu" @changeMenu="changeShowMen" class="border_b"/>
          <!--  content  -->
          <div class="f1 flex overflow-hidden p-4 route_content gap-x-4">
              <MdPreview :id="markId" v-model="markdownContent" />

              <transition>
                <!-- 手机显示 -->
                <div class="phone_container relative f w-[320px] h-[699px] flex-none">
                  <div class="absolute left-0 top-0 w-full h-full">
                    <img :src="getImage('phone')" alt="" class="z-50 phone_img">
                  </div>
                  <div class="absolute w-full h-full left-0 top-0 z-40 pt-10 pb-4 px-3">
                    <div class="phone_content w-full h-full overflow-y-scroll">
                      <router-view  v-slot="{ Component, route }">
                        <transition :name="route.meta.transition || 'out-in'">
                          <component :is="Component" :key="route.path"/>
                        </transition>
                      </router-view>
                      <div class="h-[5000px]"></div>
                    </div>
                  </div>
                </div>
              </transition>
          </div>
          <!--  footer  -->
          <div class="h-[120px] p-4 border_t">
              sdfsdf
          </div>
      </div>
  </div>
</template>

<style lang="scss" scoped>
/* 隐藏路由页面滚动条 */
.route_content::-webkit-scrollbar {
    display: none;
}
.route_content{
    scrollbar-width: none;
}
/* 导航栏动画 */
.menu-enter-active {
    animation: menu-in 0.3s linear;
}
.menu-leave-active {
    animation: menu-out 0.3s;
}
@keyframes menu-in {
    0% {
        width: 0;
    }
    100% {
        width: 200px;
    }
}
@keyframes menu-out {
    0% {
        width: 200px;
    }
    100% {
        z-index: -1;
        width: 0;
    }
}
.contain_left {
  max-width: calc(100% - 320px);
}

/* 隐藏滚动条但保留滚动功能 */
.phone_content {
  overflow: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
}
.phone_img {
  width: 240%;
  max-width: fit-content !important;
  margin-left: -70%;
  margin-top: -30px;
}

.phone_content::-webkit-scrollbar {
  width: 0;
  height: 0;
}
#preview-only {
  width: 0;
  flex: 1;
}
</style>
